<template>

  <h1>{{ articleProps.title }}</h1>
  <h4>ID: {{ articleProps.id }}</h4>
  <p>Author: {{ articleProps.author }}</p>
  <p>Read Count: {{readCt }}</p>
  <p>Content: {{ articleProps.content }}</p>

</template>

<script setup>
import {ref} from "vue";

const articleProps = defineProps({
  // 定义id字段，且约定必须传，类型为Number
  id: {
    type: Number,
    required: true
  },
  // 定义title字段，且约定必须传，类型为String，默认值为'default title'
  title: {
    type: String,
    required: true,
    default: 'default title'
  },
  // 定义author字段，且约定必须传，类型为String
  author: {
    type: String,
    required: true
  },
  // 定义content字段，不做任何约束，类型为任意类型
  content: {}
});
const readCt = ref(0);

// 定义暴露给父组件的方法
defineExpose({
  // 定义一个方法，用于增加文章阅读量
  addReadCount() {
    // 这里可以调用一个接口，增加文章阅读量
    readCt.value++;
    alert('阅读量+1')
  }
})
</script>

<style scoped>

</style>